<template>
    <div>
      <div class="v-box" v-html="html"></div>

      <ul class="ul2">
        <li v-for="(item,index) in data" :key="index">
          <router-link :to="item.path" :class="$route.params.id2==index?'acti':''">
            {{item.txt}}<p v-if="$route.params.id2==index"></p>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
  import * as list from "../../../api/list.js";
    export default {
      name: "Voting",
      data(){
        return{
          html:null,
          data:[
            {path:'/vote/4/showout/0/'+this.$route.params.id3,txt:'节目排行'},
            {path:'/vote/4/ranking/1/'+this.$route.params.id3,txt:'人气排行'},
            {path:'/vote/4/voting/2/'+this.$route.params.id3,txt:'投票说明'}
          ]
        }
      },
      beforeMount(){
        let parmes3 = {active_id:this.$route.params.id3};
        list.activePoll(parmes3).then(res=>{
          console.log(res.data);
          this.html = res.data.vote_state;
        })
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
 .v-box{
   width: 670px;
   padding: 20px;
   margin: 20px auto;
   background: #f0f0f0;
 }

 .ul2{
   display: flex;
   justify-content: space-between;
 }
 .ul2 li{
   position: relative;
   flex-grow: 1;
   font-size: 26px;
   border-right: 1px solid #444;
   text-align: center;
 }
 .ul2 .acti{
   color: #884ca4;
 }
 .ul2 li p{
   position: absolute;
   left: 50%;
   margin-left: -52px;
   bottom: -20px;
   width: 104px;
   border: 4px solid #884ca4;
 }
 .ul2 li:last-child{
   border: none;
 }
</style>
